<template>
	<view>
		<view v-if="product.publisher.user" class="new-czz-info bg-color-white">
			<view class="flex flex-ai-center flex-js-sb">
				<w-title-color entitle="ARTIST" title="创作者" />
				<u-avatar size='36' :src='$ossUrl+product.publisher.user.avatar'></u-avatar>
			</view>
			<view class="font-size-14 mt-18" style="color: #333;">
				{{ product.publisher.user.detail }}
			</view>
		</view>
		<view v-if="product.publisher" class="new-czz-info bg-color-white mt-8">
			<view class="flex flex-ai-center flex-js-sb">
				<w-title-color entitle="BRAND" title="品牌方" />
				<view class="flex flex-ai-center">
					<u-avatar size='36' :src='$ossUrl+product.publisher.company_logo'></u-avatar>				
					<!-- <view class="font-size-14 ml-4" style="color: #333;">
						{{product.publisher.name && handleLang(product.publisher.name)}}
					</view> -->
				</view>
			</view>
			<view class="font-size-14 mt-18" style="color: #333;">
				当万物皆可上链的数字未来来临，数字藏品将突破艺术收藏的边界，渗透至数字身份认证、版权确权、品牌授权等多元领域。在此趋势下，LvBox以打造头部数字藏品电商平台为核心使命，致力于搭建连接多元数字资产的交易生态。
			</view>
		</view>
		<view v-if="showYYZ" class="new-czz-info bg-color-white mt-8">
			<view class="flex flex-ai-center flex-js-sb">
				<w-title-color entitle="OWNER" title="拥有者" />
				<u-avatar size='36' :src='$ossUrl + userInfo.avatar'></u-avatar>
			</view>
		</view>
	</view>
	<!-- <view class="bg-color-item br-12 pa-12 product-builder flex flex-js-sb">
		<view class="item ">
			<view class="font-size-14  font-color-textPrimary pa-12 flex flex-js-sb flex-ai-center">
				<view class="left">
					<text class="text">品牌方</text>
					<view class="flex flex-ai-center mt-6">
						<u-avatar size='16' :src='$ossUrl+product.publisher.company_logo'></u-avatar>
						<text class="font-size-12 font-color-666 ml-4 text-overflow" style="max-width: 180rpx;">{{product.publisher.name && handleLang(product.publisher.name)}}</text>
					</view>
				</view>
				<view class="more-btn flex flex-center">
					<w-icon size="12" class='arrow-icon' name="arrow-img"></w-icon>
				</view>
			</view>
		</view>
		
		<view class="item br-8" v-if="product.publisher.user&&product.publisher.user.id">
			<view class="font-size-14  font-color-textPrimary pa-12 flex flex-js-sb flex-ai-center">
				<view class="left">
					<text class="text">创作者</text>
					<view class="flex flex-ai-center mt-6">
						<u-avatar size='16' :src='$ossUrl+product.publisher.user.avatar'></u-avatar>
						<text class="font-size-12 font-color-666 ml-4 text-overflow" style="max-width: 180rpx;">{{ product.publisher.user.nickname}}</text>
					</view>
				</view>
				<view class="more-btn flex flex-center">
					<w-icon size="12" class='arrow-icon' name="arrow-img"></w-icon>
				</view>
			</view>
		</view>
	</view> -->
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	export default {
		name: "w-product-builder",
		props: {
			product: {
				type: Object,
				defaul() {
					return {
						batch: {},
						publisher: {},
						series: {},
					}
				}  
			},
			showYYZ:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {

			};
		},
		methods:{
			...mapActions('user', ['getUserInfo']),
		}
	}
</script>

<style lang="scss">
	.new-czz-info {
		border-radius: 0 0 24rpx 24rpx;
		padding: 42rpx 32rpx;
	}
	.product-builder {
		.item:nth-child(2){
			background-image: url($IMG_URL + '/static/bg/product-builder-bg.png');
			// background-image: url($IMG_URL + '/static/bg/img_czz.png');
		}
		.item:nth-child(1){
			background-image: url($IMG_URL + '/static/bg/product-builder-bg.png');
			// background-image: url($IMG_URL + '/static/bg/img_czz.png');
		}
		.item {
			width: 300rpx;
			background-repeat: no-repeat;
			background-size: contain;
			.text {
				font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
			}

			.more-btn {
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				background: rgba(0,0,0,0.05);
				.arrow-icon {
					// transform: rotate(180deg);
				}
			}

		}
	}
</style>
